<template>

<div id="AboutMe">
  <div id="homeBar">
    <mu-appbar title="个人信息" style="background-color:#409EFF">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'Home' }"/>
    </mu-appbar>
  </div>

  <mu-list>
    <mu-list-item title="我的个人信息" :to="{name: 'Me' }">
      <mu-avatar v-bind:src="this.$image.icon1" slot="leftAvatar"/>

      <mu-icon value="arrow_forward"  slot="right"/>
    </mu-list-item>
    <mu-list-item title="领取金币信息" :to="{name: 'GetYuanBao' }" v-if="this.isAgent">
      <mu-avatar v-bind:src="this.$image.icon2" slot="leftAvatar"/>

      <mu-icon value="arrow_forward" slot="right"/>
    </mu-list-item>
    <mu-list-item title="修改密码"  v-if="this.isCarrieroperator" @click="handlePassword()">
      <mu-avatar v-bind:src="this.$image.icon2" slot="leftAvatar"/>

      <mu-icon value="arrow_forward" slot="right"/>
    </mu-list-item>
  </mu-list>

  <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="请输入旧密码">
        <el-input v-model="form.password" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="请输入新密码">
        <el-input v-model="form.newPassword" size="mini"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdate">修 改</el-button>
    </div>
  </el-dialog>


  <el-row style="height:180px">
    <div id="aa" class="codeimg">
    </div>
  </el-row>
</div>

</template>

<style>
  #AboutMe {
    height: 600px;
  }

  #AboutMe .codeimg {
    position:relative;
    width: 100px;
    top: 150px;
    right: 35px;
    margin: 0px auto;
  }

  #AboutMe .el-dialog {
    width: 70%
  }
</style>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data () {
      return {
        codeimg: '',
        isAgent: false,
        isCarrieroperator: false,
        dialogFormVisible: false,
        form: {
          password: '',
          newPassword: '',
          account: sessionStorage.getItem('account')
        }
      }
    },
    methods: {
      handlePassword () {
        this.dialogFormVisible = true
      },
      handleUpdate () {
        if (this.form.password === '' || this.form.newPassword === '') {
          this.$message({
            message: '请完善信息',
            type: 'error'
          })
          return false
        }

        let that = this
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.updatePassword',
          params: that.form
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.dialogFormVisible = false
            that.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            that.$message({
              message: resp.data.cause,
              type: 'error'
            })
          }
        })
      },
      genCode (url) {
        var qrcode = new QRCode(document.getElementById('aa'), {
          width: 170, // 设置宽高
          height: 170
        })
        if (url !== undefined && url.length !== 0) {
          qrcode.makeCode(url)
        }
      },
      getCodeUrl () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.getCodeImg',
          params: {'account': sessionStorage.getItem('account')}
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.genCode(resp.data.data)
          }
        })
      }
    },
    mounted () {
      if (sessionStorage.getItem('role') === 'agent') {
        this.isAgent = true
      }
      if (sessionStorage.getItem('role') === 'carrieroperator') {
        this.isCarrieroperator = true
      }
      this.getCodeUrl()
    }
  }
</script>
